<template>
    <div class="container" :style="'height: '+docheight+'px'">
        <leftcont></leftcont>
        <div class="righCont">
            <topcont></topcont>
            <div class="content">
                <div class="setCont">
                    <div class="mainTop" style="margin-top:20px">
                        <div class="mainTitle">其他设置</div>
                    </div>
                    <div class="formCont">
                        <el-form ref="form" label-width="80px">
                            <el-form-item label="客服微信">
                                <el-input v-model="wxImg"></el-input>
                            </el-form-item>
                            <el-form-item label="客服热线">
                                <el-input v-model="hotline_mobile"></el-input>
                            </el-form-item>
                            <el-form-item label="关于我们" v-if="showData">
                              <edit :defVal="noticeContent" @change="chageNotice"></edit>
                            </el-form-item>
                            <el-form-item label="">
                                <btn value="保存信息" @click="showSet(2)"></btn>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </template>
  
  <script>
  import leftcont from '@/components/leftCont.vue'
  import topcont from '@/components/topCont.vue'
  import btn from '@/components/public/btn.vue'
  import defUpImg from '@/components/public/defUpImg.vue'
  import edit from '@/components/public/edit.vue'

  import { update,showSet } from '@/http/api'
    export default {
      components: {edit,defUpImg,leftcont,topcont,btn},
      data() {
        return {
          hotline_mobile:'',
          wxImg:'',
          noticeContent:'',
          showData:false,
        }
      },
      props: {},
      methods:{
        chageNotice(val){
          this.noticeContent = val
        },
        showSet(){
          var data = {
            hotline_mobile:this.hotline_mobile,
            about_us:this.noticeContent,
            service_wachat:this.wxImg,
          }
          let loading = this.$loading({
              lock: true,
              text: 'Loading',
              spinner: 'el-icon-loading',
              background: 'rgba(255, 255, 255, 0.7)'
            });
          update(data).then((res)=>{
            if(res.data.code==1){
              this.$message({
                message: '更新成功',
                type: 'success'
              });
            }else{
              this.$message(res.data.msg)
            }
            loading.close()
          }).catch((err)=>{
            loading.close()
            this.$message('服务器请求超时')
          });
        },
        getData(){
          showSet().then((res)=>{
            if(res.data.code==1){
              this.hotline_mobile = res.data.data.hotline_mobile;
              this.wxImg = res.data.data.service_wachat;
              this.noticeContent = res.data.data.about_us;
            }else{
              this.$message(res.data.msg)
            }
            this.showData = true
          }).catch((err)=>{
            this.showData = true
            this.$message('服务器请求超时')
          });
        }
      },
      mounted(){
      },
      created() {
        this.getData()
      },
    }
  </script>
  
  <style scoped lang="less">
  .container{
    width: 100%;
    display: flex;
    overflow: hidden;
    .righCont{
      display: flex;
      flex-direction: column;
      flex: 1;
      margin-left: 15px;
      height: 100%;
      width: 10px;
      background-color: #F4F8FF;
      .content{
        padding: 20px;
        box-sizing: border-box;
        width: 100%;
        flex: 1;
        overflow: auto;
        .setCont{
          width: 100%;
          padding: 20px;
          box-sizing: border-box;
          background-color: #fff;
          .mainTop{
            display: flex;
            margin-bottom: 25px;
            align-items: center;
            justify-content: space-between;
            .mainTitle{
              font-size: 14px;
              font-weight: bold;
            }
          }
          .formCont{
            width: 800px;
          }
        }
      }
    }
}
  </style>
  